<template>
  <div>
    <div style="display: flex;flex-direction: column;align-items: center">
      <div class="box"  style="display: flex;flex-direction: column;align-items: center" v-for="(item,index) in recoms" :key="item.num">
        <div class="chart">{{item.title}}{{item.price}}</div>
        <img class="img" :src="item.images[0].img">
        <button @click="tolike(index)">点赞</button>
        <h5>{{item.likes}}</h5>
        <div>距离你:{{item.destance}}米</div>
        <div>{{item.produ}}</div>
        <div>昨日人气活跃指数：{{item.num}}</div>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapActions} from 'vuex'
  import axios from 'axios'
  export default {
    props: ['wearing'],
    data () {
      return {
        scrollWatch: true,
        swiperOption: {
          slidesPerView: 'auto',
          centeredSlides: true,
          spaceBetween: 30,
          loop: true
        },
        selected: '1',
        scroll: 0,
        totop: false,
        wear:[],
        wear_id: '',
        avatar:require('../../../assets/images/cat.png'),
        username: '',
        time: '',
        price: '',
        wear_picture: '',
        wear_content: '',
        wear_userid: '',
        wear_title: '',
        wear_time:'',
        wear_userimage: '',
        add: '',
        kind: '',
        star: '点赞',
        freight: '0',
        isShow: true,
        txt: '显示全部',
        num: 3,

        nears: [
          {
            'avatar': require('../../../assets/images/cat.png'),
            'name': '流浪在天际',
            'time': '7小时前来过',
            'price': '￥100',
            'img': require( '../../../assets/images/hangpai.png'),
            'desc': '席梦思床垫1.8米x2米 95新，换了乳胶，上门自提',
            'add': '来自南昌',
            'kind': '趣巢|塘山镇',
            'star': '点赞',
            'num': '2'
          },
          {
            'avatar': require('../../../assets/images/cat.png'),
            'name': '万莉佳',
            'time': '8小时前来过',
            'price': '￥80',
            'img': require( '../../../assets/images/hangpai.png'),
            'desc': '绑带细跟真皮凉鞋，清鞋柜，300多买来的，穿过两次，9.5新，34码，鞋跟10厘米左右，鞋子多，便宜处理',
            'add': '来自南昌',
            'kind': '趣巢|众鑫城上城'
          }
        ],
        recoms: [
          {
            'title': '安信工趣巢',
            'price': '￥100',
            'members': 393,
            'num': 163,
            'produ': '想要宝贝置顶的可以私聊我',
            'destance': 291,
            'likes': 10,
            'images':
              [
                {'img':require( '../../../assets/images/cat.png')},
                {'img':require( '../../../assets/images/zara.png')}
              ]
          },
          {
            'title': '华瑞锦城趣巢',
            'price': '￥120',
            'members': 60,
            'num': 3,
            'produ': '[专治各种疑问]趣巢是什么？',
            'destance': 319,
            'likes': 11,
            'images':
              [
                {'img': require('../../../assets/images/cat.png')},
                {'img':require( '../../../assets/images/hangpai.png')}
              ]

          },
          {
            'title': '朱家新村趣巢',
            'price': '￥130',
            'members': 91,
            'num': 6,
            'produ': '想要宝贝置顶的可以私聊我',
            'destance': 418,
            'likes': 13,
            'images':
              [
                {'img': require('../../../assets/images/cat.png')},
                {'img': require('../../../assets/images/duorou.png')}
              ]

          }
        ]

      }
    },
    watch: {
      selected: function(val) {
        this.selected = val;
        // console.log(this.selected);
      }
    },

    methods: {
      tolike(like){
      this.recoms[like].likes = this.recoms[like].likes+1
      },
      reflesh(){
        location.reload()
      },
      showMore(){

        this.isShow = !this.isShow;

        this.num = this.isShow? 2: this.wear.length;
        this.txt = this.isShow?  '显示全部':'收起'
      },
      menu() {
        //var Height= document.querySelector('.news').offsetTop;
        // console.log(Height)
        // console.log(this.scroll)
        this.scroll = document.body.scrollTop;
        //console.log(this.scroll)
        // if (this.scroll >= Height-65) {
        //     this.totop = true
        // }else{
        //     this.totop = false
        // }
      }
    },
    mounted() {
      axios.get('/api/wear/index.html')
        .then((res) => {
          console.log(res);
          this.wear = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
      document.documentElement.scrollTop = document.body.scrollTop = 0
      window.addEventListener('scroll', this.menu, false)
    },
    destroyed () {
      this.scrollWatch = true;
    },
    created() {
      this.id = this.$route.params.id;
    }
  }
</script>
<style lang="css" scoped>
  .box{
    width: 95%;
    height: 370px;
    margin-top: 20px;
    border: 1px solid pink;
  }
  .chart{
    width: 95%;
    font-size: 20px;
    font-family: 楷体;
    font-weight: bold;
    text-align: left;
  }
  .img{
    width: 95%;
    height: 75%;
    border-radius: 2%;
  }
</style>
